<template>
	<div id="main">
		<div class="huodong">
			<div class="weizi">
				<img src="../assets/main/定位.png" />
				<span>北京理工大学国防科技园2号楼10层</span>
				<img src="../assets/main/铃铛.png" />
			</div>
			<div class="inpt_div">
				<img src="../assets/main/搜索.png"  @click="dian()"/>
				<input type="text" placeholder="山姆会员商店优惠商品" />
			</div>
			<div class="imglogo_div">
				<img src="../assets/main/页面-1-首页.png" />
			</div>
			<div class="img_kj_div" v-for="item in datalist_kj">
				<div class="kuaijie_div" v-for="i in item.imgs">
					<img :src="i.url" />
					<p>{{ i.name }}</p>
				</div>
			</div>
		</div>
		<div class="fujindian">
			<p class="text">附近店铺</p>
			<div v-for="itme in datalist_dianpu">
				<div class="dianpu" v-for="it in itme.shops">
					<div class="dianpu_logo">
						<img :src="it.imgs" @click="fujin()" />
					</div>
					<div class="dianpu_jianjie">
						<p>{{it.text1}}</p>
						<div class="jianjie_div" v-for="aa in it.jianjie">
							<span>{{aa.sp1}}</span>
							<span>{{aa.sp2}}</span>
							<span>{{aa.sp3}}</span>
						</div>
						<p class="vip_p">{{it.vipyouhui}}</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				datalist_kj: [{
						imgs: [{
								url: require("../assets/main/超市.png"),
								name: "超市便利",
							},
							{
								url: require("../assets/main/菜市场.png"),
								name: "菜市场",
							},
							{
								url: require("../assets/main/水果店.png"),
								name: "水果店",

							},
							{
								url: require("../assets/main/鲜花.png"),
								name: "鲜花绿植",
							},
							{
								url: require("../assets/main/医药健康.png"),
								name: "医药健康",
							},
						],
					},
					{
						imgs: [{
								url: require("../assets/main/家居.png"),
								name: "家居时尚",
							},

							{
								url: require("../assets/main/蛋糕.png"),
								name: "烘培蛋糕",
							},
							{
								url: require("../assets/main/签到.png"),
								name: "签到",
							},
							{
								url: require("../assets/main/大牌免运.png"),
								name: "大牌免运",
							},
							{
								url: require("../assets/main/红包.png"),
								name: "红包套餐",
							},
						],
					},
				],
				datalist_dianpu: [{
					shops: [{
						imgs: require("../assets/main/菜市场.png"),
						text1: "沃尔玛",
						jianjie: [{
							sp1: "月售1万+",
							sp2: "起送¥0",
							sp3: "基础运费¥5"
						}],
						vipyouhui: "VIP尊享满89元减4元运费券（每月3张）"
					}]
				}, {
					shops: [{
						imgs: require("../assets/main/菜市场.png"),
						text1: "沃尔玛1",
						jianjie: [{
							sp1: "月售1万+",
							sp2: "起送¥0",
							sp3: "基础运费¥5"
						}],
						vipyouhui: "VIP尊享满89元减4元运费券（每月3张）"
					}]
				}]
			};
		},
		methods:{
			dian:function(){
				this.$router.push('/home/search');
			},
			fujin:function(){
				this.$router.push('/searchdetails');
			}
		}
	};
</script>

<style scoped>
	/* 单独给页面设置背景色 */
	#main {
		background-color: #f8f8f8;
		height: 100%;
		position: fixed;
		width: 100%;
	}

	.huodong {
		height: 378px;
		background-color: white;
	}

	.weizi {
		height: 22px;
		padding-top: 36px;
		padding-left: 19.2px;
		padding-right: 19.3px;
		display: flex;
		align-items: center;
	}

	.weizi span {
		font-size: 16px;
		color: #333333;
		flex: 20;
		padding-left: 9.7px;
	}

	.weizi :nth-child(1) {
		width: 13.1px;
		height: 16.2px;
	}

	.weizi :nth-child(3) {
		width: 16.5px;
		height: 15.5px;
	}

	.inpt_div {
		background: #F5F5F5;
		margin-left: 20px;
		margin-right: 20px;
		height: 30px;
		margin-top: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		line-height: 22px;
		border-radius: 16px;
		padding-left: 15px;
		padding-right: 15px;
	}

	.inpt_div img {
		height: 16px;
		width: 16px;
	}

	.inpt_div input {
		flex: 1;
		height: 22px;
		border-radius: 16px;
		padding-left: 15px;
		border: none;
		background: #F5F5F5;
		font-size: 14px;
		outline: none;
	}

	.imglogo_div {
		padding-left: 18px;
		padding-right: 18px;
		padding-top: 12px;
		display: flex;
	}

	.imglogo_div img {
		flex: 1;
		height: 86px;
	}

	.img_kj_div {
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 16px;
		display: flex;
		align-items: center;
	}

	.img_kj_div .kuaijie_div {
		flex: 20;
		text-align: center;
	}

	.kuaijie_div img {
		width: 40px;
		height: 40px;
	}

	.kuaijie_div p {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #333333;
		text-align: center;
	}

	.fujindian {
		margin-top: 10px;
		background: white;
		padding-left: 18px;
	}

	.fujindian .text {
		font-size: 18px;
		color: #333333;
	}

	.dianpu {
		display: flex;
		padding-top: 14px;
	}

	.dianpu_logo img {
		width: 56px;
		height: 56px;
	}

	.dianpu_jianjie {
		flex: 1;
		padding-left: 16px;
	}

	.dianpu_jianjie p {
		font-size: 16px;
		color: #333333;
	}

	.dianpu_jianjie div {
		padding-top: 8px;
	}

	.jianjie_div span {
		font-size: 13px;
		color: #333333;
		padding-right: 16px;
	}

	.fujindian .vip_p {
		font-size: 13px;
		color: #e93b3b;
		padding-top: 8px;
		padding-bottom: 12px;
		border-bottom: #F1F1F1 solid 1px;
	}
</style>
